<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="编号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select clearable v-model="dataForm.status" placeholder="状态">
          <el-option v-for="dict in ticketStatusList" :key="dict.id" :label="dict.value" :value="dict.code" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
<!--        <el-button v-if="isAuth('mvs:ticket:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>-->
        <el-button v-if="isAuth('mvs:ticket:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
        <el-button @click="paymentHandle" type="success">缴费</el-button>
        <el-button @click="queryTicket" type="success">缴费（指定罚单）</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table
        v-if="isAuth('mvs:ticket:delete')"
        :data="dataList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form label-position="left" class="expand-form" inline>
              <el-form-item label="罚金：">
                <span>{{ scope.row.fineAmount.toLocaleString('en-US', {  minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' 元' }}</span>
              </el-form-item>
              <el-form-item label="滞纳金：">
                <span>{{ scope.row.overdueFee.toLocaleString('en-US', {  minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' 元' }}</span>
              </el-form-item>
              <el-form-item label="违章天数：">
                <span>{{ scope.row.violationDay }}</span>
              </el-form-item>
            </el-form>
            <div class="expand-table">
              <label>缴费记录：</label>
              <el-table :data="scope.row.paymentDetailList" border>
<!--                <el-table-column prop="ticketId" label="罚单编号" header-align="center" align="center" />-->
                <el-table-column
                  prop="paymentMoney"
                  :formatter="(row) => row.paymentMoney.toLocaleString('en-US', {  minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' 元'"
                  header-align="center"
                  label="缴费金额"
                  align="right" />
                <el-table-column prop="username" label="缴费人" header-align="center" align="center" />
                <el-table-column prop="createTime" label="缴费时间" header-align="center" align="center" />
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          min-width="100"
          prop="id"
          header-align="center"
          align="center"
          label="罚单编号">
        </el-table-column>
        <el-table-column
          prop="username"
          header-align="center"
          align="center"
          label="用户">
        </el-table-column>
        <el-table-column
          :formatter="(row) => (row.waitFine + row.waitOverdueFee).toLocaleString('en-US', {  minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' 元'"
          header-align="center"
          align="right"
          label="总罚款">
        </el-table-column>
        <el-table-column
          prop="waitFine"
          :formatter="(row) => row.waitFine.toLocaleString('en-US', {  minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' 元'"
          header-align="center"
          align="right"
          label="待缴罚金">
        </el-table-column>
        <el-table-column
          prop="waitOverdueFee"
          :formatter="(row) => row.waitOverdueFee.toLocaleString('en-US', {  minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' 元'"
          header-align="center"
          align="right"
          label="待缴滞纳金">
        </el-table-column>
<!--        <el-table-column
          prop="waitFine"
          :formatter="(row) => row.fineAmount.toLocaleString('en-US', {  minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' 元'"
          header-align="center"
          align="right"
          label="罚金">
        </el-table-column>
        <el-table-column
          prop="overdueFee"
          :formatter="(row) => row.overdueFee.toLocaleString('en-US', {  minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' 元'"
          header-align="center"
          align="right"
          label="滞纳金">
        </el-table-column>
        <el-table-column
          prop="violationDay"
          header-align="center"
          align="center"
          label="违章天数">
        </el-table-column>-->
        <el-table-column
          prop="createTime"
          header-align="center"
          align="center"
          label="产生日期">
        </el-table-column>
        <el-table-column
          prop="ticketStatusName"
          header-align="center"
          align="center"
          label="状态">
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showViolationInfo(scope.row.violationId)">违章信息</el-button>
            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-else
        :data="dataList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table :data="scope.row.paymentDetailList" border>
              <el-table-column prop="ticketId" label="罚单编号" header-align="center" align="center" />
              <el-table-column
                prop="paymentMoney"
                :formatter="(row) => row.paymentMoney.toLocaleString('en-US', {  minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' 元'"
                header-align="center"
                label="缴费金额"
                align="right" />
              <el-table-column prop="username" label="缴费人" header-align="center" align="center" />
              <el-table-column prop="createTime" label="缴费时间" header-align="center" align="center" />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          header-align="center"
          align="center"
          label="罚单编号">
        </el-table-column>
        <el-table-column
          :formatter="(row) => (row.waitFine + row.waitOverdueFee).toLocaleString('en-US', {  minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' 元'"
          header-align="center"
          align="right"
          label="总罚款">
        </el-table-column>
        <el-table-column
          prop="waitFine"
          :formatter="(row) => row.waitFine.toLocaleString('en-US', {  minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' 元'"
          header-align="center"
          align="right"
          label="待缴罚金">
        </el-table-column>
        <el-table-column
          prop="waitOverdueFee"
          :formatter="(row) => row.waitOverdueFee.toLocaleString('en-US', {  minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' 元'"
          header-align="center"
          align="right"
          label="待缴滞纳金">
        </el-table-column>
        <el-table-column
          prop="violationDay"
          header-align="center"
          align="center"
          label="违章天数">
        </el-table-column>
        <el-table-column
          prop="ticketStatusName"
          header-align="center"
          align="center"
          label="状态">
        </el-table-column>
      </el-table>
    </template>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <violation-info v-if="violationInfoVisible" ref="violationInfoBox" @refreshDataList="getDataList"></violation-info>

    <!-- 缴费的对话框 -->
    <el-dialog @close="dataForm.ticketId = ''" title="罚单信息" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <div class="ticket-info">
        <div class="item">
          <span class="label">罚单编号：</span>
          <span class="content">{{ dataForm.ticketId }}</span>
        </div>
        <div class="item">
          <span class="label">滞纳金：</span>
          <span class="content">{{ dataForm.overdueFee }}</span>
        </div>
        <div class="item">
          <span class="label">待缴罚金：</span>
          <span class="content">{{ dataForm.waitFine }}</span>
        </div>
        <div class="item">
          <span class="label">待缴滞纳金：</span>
          <span class="content">{{ dataForm.waitOverdueFee }}</span>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="dataForm.ticketId" type="primary" @click="paymentHandle">缴费</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import ViolationInfo from './violation-info.vue'
  export default {
    data () {
      return {
        dataForm: {
          key: '',
          status: '',
          ticketId: '',
          overdueFee: '',
          waitFine: '',
          waitOverdueFee: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        violationInfoVisible: false,
        isVehicleOwner: false,
        ticketStatusList: [],
        dialogFormVisible: false
      }
    },
    components: {
      ViolationInfo: ViolationInfo
    },
    activated () {
      this.getDataList()
      this.getIsVehicleOwner()
      this.getTicketStatusList()
    },
    methods: {
      getIsVehicleOwner () {
        const roleList = this.$store.state.user.roleList
        this.isVehicleOwner = roleList.length === 1 && roleList[0].roleName === 'vehicleOwner'
      },
      // 获取罚单状态列表
      getTicketStatusList () {
        this.$http({
          url: this.$http.adornUrl('/sys/dict/list/ticketStatus'),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.ticketStatusList = data.dictList
          } else {
            this.ticketStatusList = []
          }
        })
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/mvs/ticket/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'key': this.dataForm.key,
            'status': this.dataForm.status
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      showViolationInfo (violationId) {
        this.violationInfoVisible = true
        this.$nextTick(() => {
          this.$refs.violationInfoBox.init(violationId)
        })
      },
      // 删除
      deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm(`确定删除吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/mvs/ticket/delete'),
            method: 'delete',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      // 缴费
      payment (money) {
        this.$http({
          url: this.$http.adornUrl('/mvs/ticket/payment'),
          method: 'post',
          data: this.$http.adornData({
            payMoney: money,
            ticketId: this.dataForm.ticketId
          }, false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: data.msg,
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.dialogFormVisible = false
                this.dataForm.ticketId = ''
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      // 对当前用户下的罚单进行缴费
      paymentHandle () {
        this.$msgbox.prompt('请输入缴费金额', '缴费', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^\d+(\.\d{1,2})?$/,
          inputPlaceholder: '单位元',
          inputErrorMessage: '缴费金额必须为最多两位小数的正数',
          closeOnClickModal: false
        }).then(({ value }) => {
          this.payment(value)
        })
      },
      // 根据罚单id查询罚单
      queryTicket () {
        this.$msgbox.prompt('请输入罚单编号', '缴费', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^\d+$/,
          inputErrorMessage: '罚单编号只能由数字组成',
          closeOnClickModal: false
        }).then(({ value }) => {
          this.$http({
            url: this.$http.adornUrl(`/mvs/ticket/info/payment/${value}`),
            method: 'get'
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.ticketId = data.ticket.id
              this.dataForm.overdueFee = data.ticket.overdueFee
              this.dataForm.waitFine = data.ticket.waitFine
              this.dataForm.waitOverdueFee = data.ticket.waitOverdueFee
              this.dialogFormVisible = true
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.ticket-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .item {
    display: flex;
    margin: 10px 0;
    .label {
      width: 100px;
      padding: 8px 0;
      text-align: right;
    }
    .content {
      flex: 1;
      padding: 8px;
      border-radius: 5px;
      border: 1px solid #dcdfe6;
    }
  }
}

.expand-form {
  display: flex;
  font-size: 0;
  /deep/ label {
    color: #99a9bf;
  }
  .el-form-item {
    margin-bottom: 0;
    flex: 1;
  }
}

.expand-table {
  width: 50%;
  display: flex;
  justify-content: start;
  margin-top: 20px;
  label {
    width: 80px;
    color: #99a9bf;
  }
}


</style>
